<template>
  <div>
    <span class="search-condition-item-label"
          :title="attr.title">{{ attr.title ? attr.title : '' }}</span>
    <a-checkbox-group class="search-condition-item-widget"
                      :value="newValue"
                      @change="onValueChange">
      <a-checkbox v-for="item in attr.items"
                  :value="item.value"
                  :key="item.value"> {{ item.title }} </a-checkbox>
    </a-checkbox-group>
  </div>
</template>

<script>
  export default {
    props: {
      attr: {
        type: Object,
        default: {
          title: '',
          items: []
        }
      },
      value: {
        type: Object,
        default: []
      }
    },
    data() {
      return {
        newValue: this.value ? this.value : []
      };
    },
    watch: {
      value(newVal, oldVal) {
        this.newValue = newVal ? newVal : [];
      }
    },
    methods: {
      onValueChange(value) {
        if (this.newValue.length != value.length) {
          this.$emit('valueChange', { key: this.attr.key, value: value.length > 0 ? value : null });
        }
      }
    }
  };
</script>
<style scoped>
  .search-condition-item-widget {
    flex: 0 0 auto;
    width: auto;
  }
</style>
